<template>
  <div class="dashboard-container">
    <el-row>
      <el-col :span="14">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="订单状态">
            <el-link :type="colorList[form.status]" disabled>{{ statusList[form.status] }}</el-link>
          </el-form-item>
          <el-form-item label="订单编号">
            <el-input v-model="form.order_num" disabled />
          </el-form-item>
          <el-form-item label="发起用户">
            <el-input v-model="form.user_name" disabled />
          </el-form-item>
          <el-form-item label="发起部门">
            <el-input v-model="form.department" disabled />
          </el-form-item>
          <el-form-item label="招聘名称">
            <el-input v-model="form.job_name" disabled />
          </el-form-item>
          <el-form-item label="招聘等级">
            <el-input v-model="form.recruit_level" disabled />
          </el-form-item>
          <el-form-item label="薪资">
            <el-input v-model="form.pay" disabled />
          </el-form-item>
          <el-form-item label="招聘性质">
            <el-input v-model="form.job_nature" disabled />
          </el-form-item>
          <el-form-item label="工作年限">
            <el-input v-model="form.job_bg" disabled />
          </el-form-item>
          <el-form-item label="工作描述">
            <el-input v-model="form.job_desc" type="textarea" disabled />
          </el-form-item>
          <el-form-item label="学历">
            <el-input v-model="form.edu" disabled />
          </el-form-item>
          <el-form-item label="性别">
            <el-input v-model="form.gender" disabled />
          </el-form-item>
          <el-form-item label="订单消费">
            <el-input v-model="form.integral" disabled />
          </el-form-item>
          <el-form-item label="发起时间">
            <el-input v-model="form.create_time" disabled />
          </el-form-item>
          <el-form-item v-if="form.status != '10' && form.status != '0'" label="接单时间">
            <el-input v-model="form.receive_time" disabled />
          </el-form-item>
          <el-form-item>
            <el-button v-if="form.status === '0'" type="primary" icon="el-icon-check" @click="receiveOrderFun">接单</el-button>
            <el-button v-if="form.status === '1' || form.status === '2'" type="primary" icon="el-icon-upload2" @click="uploadProcess">招聘进程</el-button>
            <el-button v-if="form.status === '2'" type="primary" icon="el-icon-circle-check" @click="receiveEntryFun">入职</el-button>
            <el-button v-if="form.status === '3' && form.confirm_status === '301'" type="primary" icon="el-icon-finished" @click="completeRecruitFun">完成</el-button>
            <el-button type="primary" icon="el-icon-download" @click="downloadFun">导出</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="10">
        <el-form label-width="100px">
          <el-form-item label="招聘进度" />
          <el-form-item>
            <el-timeline reverse>
              <el-timeline-item
                v-for="(activity, index) in form.process"
                :key="index"
                :timestamp="activity.date"
                :type="activity.type"
              >
                {{ activity.msg }}
              </el-timeline-item>
            </el-timeline>
          </el-form-item>
        </el-form>

      </el-col>
    </el-row>
    <upload-process ref="upload-process" @reloadFun="reloadFun" />
  </div>
</template>

<script>
import { getRecruiteOrderApi, receiveRefuseOrder, recruitEntryApi, completeRecruitApi } from '@/api/main'
import uploadProcess from './component/upload-process.vue'
export default {
  components: {
    uploadProcess
  },
  data() {
    return {
      form: {
      },
      order_num: '20210220153102471075',
      status: '',
      statusList: {
        0: '待接单',
        1: '已接单',
        2: '进行中',
        3: '入职',
        4: '完成',
        10: '取消'
      },
      colorList: {
        0: 'info',
        1: 'primary',
        2: 'danger',
        3: 'success',
        4: 'warning',
        10: 'info'
      }
    }
  },
  created() {
    console.log(this.$route.query)
    if (this.$route.query.order_num) {
      this.order_num = this.$route.query.order_num
      this.getOrderInfo()
    }
  },
  methods: {
    reloadFun() {
      this.getOrderInfo()
    },
    uploadProcess() {
      this.$refs['upload-process'].dialogVisible = true
      this.$refs['upload-process'].ruleForm.order_num = this.form.order_num
    },
    completeRecruitFun() {
      this.$confirm('是否确认编号为： ' + this.form.order_num + ' 的招聘订单已完成？', '确认信息', {
        confirmButtonText: '确认',
        cancelButtonText: '取消'
      })
        .then(() => {
          const data = {
            order_num: this.form.order_num
          }
          completeRecruitApi(data).then(res => {
            if (res.code === 200) {
              this.$message.success('信息提交成功，待部门确认！')
              this.getOrderInfo()
            }
          })
        })
        .catch(action => {

        })
    },
    downloadFun() {
      console.log('1')
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['订单编号', '发起人', '发起部门', '招聘职位', '招聘等级', '薪资', '招聘性质', '工作年限', '工作描述', '学历', '性别', '消费积分', '发起时间', '接单时间', '订单状态']
        const data = []
        const form = this.form
        const arr = []
        arr.push(form.order_num, form.user_name, form.department, form.job_name, form.recruit_level, form.pay, form.job_nature, form.job_bg, form.job_desc, form.edu, form.gender, form.integral, form.create_time, form.receive_time, this.statusList[form.status])
        data.push(arr)
        import('@/vendor/Export2Excel').then(excel => {
          excel.export_json_to_excel({
            filename: form.order_num + '招聘信息表格',
            data: data,
            autoWidth: true,
            header: tHeader
          })
        })
      })
    },
    receiveOrderFun() {
      this.$confirm('是否确认接收订单编号为： ' + this.form.order_num + ' 的招聘订单？', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '接受',
        cancelButtonText: '拒绝'
      })
        .then(() => {
          this.status = '1'
          this.receiveRefuseOrderFun()
        })
        .catch(action => {
          if (action === 'cancel') {
            this.status = '10'
            this.receiveRefuseOrderFun()
          }
        })
    },
    receiveEntryFun() {
      this.$confirm('是否确认招聘订单 ' + this.form.order_num + ' 的员工已入职？', '确认信息', {
        confirmButtonText: '确认',
        cancelButtonText: '取消'
      })
        .then(() => {
          const data = {
            order_num: this.form.order_num
          }
          recruitEntryApi(data).then(res => {
            if (res.code === 200) {
              this.$message.success('信息提交成功!')
              this.getOrderInfo()
            }
          })
        })
        .catch(action => {

        })
    },
    getOrderInfo() {
      const data = {
        order_num: this.order_num
      }
      getRecruiteOrderApi(data).then(res => {
        this.form = res.data
        this.form.process[this.form.process.length - 1].type = 'primary'
      })
    },
    receiveRefuseOrderFun() {
      const data = {
        order_num: this.form.order_num,
        status: this.status
      }
      console.log(data)
      receiveRefuseOrder(data).then(res => {
        if (res.code === 200) {
          let msg = ''
          if (this.status === '10') {
            msg = '已拒绝单号为： ' + this.form.order_num + ' 的招聘订单！'
          }
          if (this.status === '1') {
            msg = '已接单了单号为： ' + this.form.order_num + ' 的招聘订单！'
          }
          this.$message.success(msg)
          this.getOrderInfo()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
    &-container {
        margin: 30px;
    }
    &-text {
        font-size: 30px;
        line-height: 46px;
    }
}
</style>
